<template>
    <div class="my">
        <!-- 头部 -->
        <header>
            <!-- 已经登录的 -->
            <div v-if="isLogin" class="login banner">
                 <van-row></van-row>

                 <van-row>
                     <van-col offset="1" span="11"
                     style="height:100%; display:flex; align-items: center;"
                     >
                         <van-row type="flex" align="center">
                            <van-image
                                   width="1.5rem"
                                   height="1.5rem"
                                   round
                                   src="https://img01.yzcdn.cn/vant/cat.jpeg"
                                 />
                            <span 
                            style="color:#fff; font-size:0.4rem; margin-left: 0.3rem;"
                            >13870363259</span>
                         </van-row>
                     </van-col>

                     <van-col 
                     span="6" offset="6"
                     style="height:100%; display:flex; align-items: center;"
                     >
                          <van-button 
                          type="default"
                          size="small"
                          round
                          style="height:0.5rem"
                          @click="$router.push('/user')"
                          >编辑资料</van-button>
                     </van-col>
                 </van-row>

                 <van-row>
                     <van-grid class="grid" :border="false">
                          <van-grid-item text="头条">
                            <template #icon>{{ userInfo.art_count }}</template>
                          </van-grid-item>

                          <van-grid-item text="粉丝">
                            <template #icon>{{ userInfo.fans_count }}</template>
                          </van-grid-item>

                          <van-grid-item text="关注">
                            <template #icon>{{ userInfo.follow_count }}</template>
                          </van-grid-item>

                          <van-grid-item text="获赞">
                            <template #icon>{{ userInfo.like_count }}</template>
                          </van-grid-item>

                     </van-grid>
                 </van-row>
            </div>
            <!-- 没有登录的 -->
            <div v-else class="logout banner">
                   <div class="img-wrap" @click="$router.push('/login')">
                        <van-image width="1.7rem" height="1.7rem" :src="require('../../assets/images/mobile.png')"/>
                       <!-- <van-image width="100" height="100" :src="imgSrc"/> -->
                       <span class="text">登录/注册</span>
                   </div>
            </div>
        </header>

            <!-- 主体 -->
        <main>
            <!-- 历史/收藏 -->
             <div>
                <van-grid :column-num="2" class="grid-2" clickable>
                    <van-grid-item text="收藏">
                       <template #icon>
                           <span class="toutiao toutiao-shoucang"></span>
                       </template>
                    </van-grid-item>
                    <van-grid-item text="历史">
                       <template #icon>
                           <span class="toutiao toutiao-lishi"></span>
                       </template>
                    </van-grid-item>
                      </van-grid>
             </div>
            <!-- 链    接 -->

            <div class="link">
                <van-cell title="消息通知" is-link />
                <van-cell title="小智同学" is-link />
            </div>

        </main>

           <!-- 底部 -->
        <footer>
            <van-button 
            v-if="isLogin" 
            @click="logout"
            block
            class="exit"
            >退出</van-button>
        </footer>
        
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
// import imgSrc from '../../assets/images/mobile.png'

import { getUserInfoAPI } from '@/api'

export default {
       
       data(){
          return{
            // imgSrc,
            userInfo:{}
          }
       },
       
       computed: {
          ...mapGetters(['isLogin'])
       },

       created( ) {
          this.getUserInfo()
       },

        methods:{
            async logout () {
                try {
                    await this.$dialog.confirm({
                        title:'黑马头条',
                        message:'是否退出该账号'
                    })
                    this.$store.commit('SET_TOKEN',{})
                } catch {}
            } ,

            async getUserInfo( ) {
                if(this.isLogin) {
                     const { data } = await getUserInfoAPI()
                    //  console.log(data);

                    this.userInfo = data.data
                }
            }
        }
}
</script>

<style scoped lang="less">
.banner{
    width: 100%;
    height: 5.33333rem;
    /* background-size 你想合写在background,必须指定 position ---  0 0 / cover */
    background: url(../../assets/images/banner.png) no-repeat ;
    background-size: cover;
}

.logout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .img-wrap{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .text {
        color: #fff;
        font-size:0.4rem;
        margin-top: 0.26667rem;
    }
}
//.login >.van-row{}
.login {
    display: flex;
    flex-direction: column;
   > .van-row{
    flex:1
   }
}

:deep(.grid){
    color: #fff;
    .van-grid-item__content{
        background-color: unset;
    }
    .van-grid-item__text{
        color: #fff;
    }
    .van-grid-item__icon-wrapper{
        font-size:0.4rem;
    }
}

.grid-2{
    .toutiao {
        font-size: 40px;
    }

    .toutiao-shoucang {
        color: red;
    }

    .toutiao-lishi {
        color: orange;
    }

    //3c语法
    //calucate

}

.my {
        height: calc(100vh - 40px);
        background-color: #f5f7f9;
    }

    .link {
        margin: 10px 0;
    }

    .exit{
        .van-button__text{
            color: rgb(247, 11, 11);
        }
    }
</style>